<template>
  <view class="toOrder" style="text-align: center;margin: 0 auto;">
    <view style="padding-bottom: 80px;">
      <view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;margin: 20px 0;">
        <u-icon name="clock" color="#000" size="20"></u-icon>
        <view class="word-text">
          <text style="margin-left: 10rpx;">请在</text>
          <u-count-down :time="15 * 60 * 1000" format="mm:ss" @change="onChange">
            <view class="uni-flex time">
              <view class="time__custom">
                <h2 class="time__custom__item">{{ timeData.minutes >= 10 ? timeData.minutes : '0'+timeData.minutes}}</h2>
              </view>
              <h2 class="time__doc">:</h2>
              <view class="time__custom">
                <h2 class="time__custom__item">{{ timeData.seconds >= 10 ? timeData.seconds:'0'+timeData.seconds}}</h2>
              </view>
            </view>
          </u-count-down>
          <text>内完成支付，超时订单自动取消</text>
        </view>
      </view>
      <uni-card isShadow>
        <view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;" @click="toDoctor">
          <u-avatar :src="order.doctor ? order.doctor.face_image : ''"></u-avatar>
          <view class="text" style="margin: 15px 10px">{{order.doctor ? order.doctor.realname : ''}}医生</view>
          <u-icon name="arrow-right" color="#000" size="16"></u-icon>
        </view>
        <view style="margin-bottom: 20rpx;">
          <h2>{{order.pay_price}}</h2>
          <text class="goldColor">等待支付</text>
        </view>
        <!-- 	<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
				<view class="text">对方账户</view>
				<view class="text">{{account}}</view>
        </view>-->
        <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;margin: 20rpx 0;">
          <view class="text">创建时间</view>
          <view class="text">{{order.created_at}}</view>
        </view>
        <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
          <view class="text">订单号</view>
          <view class="text">{{order.order_sn}}</view>
        </view>
      </uni-card>
      <uni-card isShadow>
        <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;" @click="selectCoupon">
          <h3>优惠券</h3>
          <view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
            <h4 class="text mainColor">{{order.coupon ?  order.coupon.title : ''}}</h4>
            <u-icon name="arrow-right" color="#41AB85" size="20"></u-icon>
          </view>
        </view>
      </uni-card>
      <view class="uni-flex uni-row" style="padding-left: 40rpx;">
        <text>支付方式</text>
      </view>

      <uni-card isShadow>
        <view class="u-page__radio-item">
          <u-radio-group v-model="payValue" :borderBottom="true" placement="column" iconPlacement="right" activeColor="#41AB85">
            <u-radio :customStyle="{marginBottom: '16px'}" v-for="(item, index) in payList" :key="index" 
			:label="item.name" :name="item.name" :uri="item.uri"></u-radio>
          </u-radio-group>
        </view>
      </uni-card>
    </view>
    <view class="tip">
      <text class="goldColor">支付前请认真核对是否是您心仪的医生</text>
    </view>
    <view class="uni-flex uni-row twobtn" style="-webkit-justify-content: space-between;justify-content: space-between;">
      <view style="width: 50%;line-height: 50px;font-size: 18px;text-align: left;">
        <text>
          待支付:
          <text class="goldColor bold" style="margin-left: 10rpx;">{{pay_price}}元</text>
        </text>
      </view>
      <view style="width: 50%;">
        <u-button @click="toUrl('singleRoom')">立即支付</u-button>
      </view>
    </view>
  </view>
</template>

<script>
	import provinceData from '@/utils/province';
	import cityData from '@/utils/city';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import expertUrl from '@/api/expertConsulation'
	export default {
		components: {
			uniTag,uniIcons
		},
	  data() {
		return {
			pay_price:0,
			timeData: {},
			order:{},
			pay:50,
			payList: [{
					name: '微信',
					uri:'/static/expert/wechat.png',
					disabled: false
				},
				{
					name: '支付宝',
					uri:'/static/expert/pay.png',
					disabled: false
				},
				{
					name: '银联卡',
					uri:'/static/expert/bank.png',
					disabled: false
				},
			],
			payValue: '微信',
		}
	  },
	   computed:{
		  orderInfo(){
		    return this.$store.state.orderInfo 
		  },
		  discountInfo(){
			  return this.$store.state.discountInfo 
		  }
	  },
	  mounted(){
		  this.initData()
	  },
	  methods: {
		  toDoctor(){
			  uni.showToast({
			  	title: "医生详情页功能开发中，请期待！",
			  	icon: 'none'
			  })
		  },
		async initData(){
			const {data} = await this.$axios({
			  url: expertUrl.consultation_order_detail + "?order_sn=" + this.orderInfo.order_sn
			})
			this.order = data.order
			this.pay_price = this.order.pay_price
			console.log()
			if(this.discountInfo.discount_type == 1 && this.pay_price > 1){
				this.pay_price = this.order.pay_price - this.discountInfo.price
			}else if(this.discountInfo.discount_type == 2){
				this.pay_price = this.order.pay_price  * (this.discountInfo.ratio / 100)
			}else{
				this.pay_price = this.order.pay_price
			}
			
		},
		onChange(e) {
			this.timeData = e
			if(this.timeData.seconds == 0 && this.timeData.minutes == 0){
				uni.navigateTo({
					url: "order"
				});
			}
		},
		toUrl(url){
			//选择用户聊天 CONV_C2C CONV_GROUP
			this.$store.commit('createConversationActive', [this.$TIM.TYPES.CONV_C2C, String(this.orderInfo.user_id)])
			// this.$store.commit('createConversationActive', String(this.user_id))
			uni.navigateTo({
				url: url
			});
		},
		selectCoupon(){
			uni.navigateTo({
				// url: '/pages/escort/activity-dec/activity-des'
				url: '../../zjwz/jswz/select-coupon'
			});
		},
	  },
	}
</script>

<style lang="scss" scoped>
	.toOrder{
		.bold{
			font-weight: bold;
		}
		.mainColor{
			color: #41AB85;
		}
		.grayColor{
			color: #808080;margin: 10px 0;
		}
		.goldColor{
			color: #ff8d1a;
		}
		.time__custom__item{
			color: #ff8d1a;font-size: 16px;
		}
		.time__doc{
			color: #ff8d1a;font-size: 16px;
		}
		.tip{
			position: fixed;z-index: 99;left: 0;bottom: 50px;width: 100%;background-color: #efead8;
			text-align: center;padding: 10rpx 0;
		}
		.twobtn{
			background-color: #fff;
			position: fixed;bottom: 0;width: 100%;padding: 0 20rpx;
			left: 0;z-index: 99;
			height: 50px;
			button{
				margin: 5px 10px;
				background-color: #41AB85;color: #fff;border-radius: 20px;
			}
		}
	}
	.word-text{
		display: flex;
		align-items: center;
		height: 63rpx;
		font-size: 28rpx;
	}
</style>